<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--引入头部文件-->
<div id="head" th:include="common/header"></div>
<div class="container" style="width: 1350px;height: auto;margin-left: auto;margin-right: auto;margin-bottom: 100px">
    <p th:text="${city.getCityname()}" style="font-size: 30px">城市名称</p>
    <div style="margin: 30px">
        <h2 th:text="${city.getIntroduce()}">城市介绍</h2>
    </div>

    <!--layui的选项卡风格-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">景区推荐</li>
            <li>酒店推荐</li>
            <li>购物点推荐</li>
        </ul>
        <div class="layui-tab-content">
            <!--景区推荐的-->
            <div class="layui-tab-item layui-show" style=";margin-right: auto;margin-left: auto">
                <div class="left" style="float: left">
                    <div th:each="sspots:${sspots}" style="width:290px;float:left;height: auto">
                        <a th:href="@{/index/toSSpotDeatil(sspotname=${sspots.getSspotname()})}" style="float: left">
                            <div style="background-color: #d8dcea;height: 240px;width: 270px;float: left;margin: 30px 30px;border-radius: 5%">
                                <img th:src="${sspots.getPicture()}" width="250px" height="auto" alt="" style="border-radius: 10%;margin: 10px 10px">
                                <p style="text-align: center;font-size: 20px;color: black;margin-right: auto;margin-left: auto" th:text="${sspots.getSspotname()}"></p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="pageturn" style="margin-left: 80%;position: fixed;bottom: 10px">
                    <span th:if="${pageNum1 > 1}">
                        <a class="prev" th:href="@{/index/toCityDeatil(cityname=${city.getCityname()},pageNum1=${pageNum1}-1)}">
                            <button type="button" class="layui-btn">上一页</button>
                        </a>
                    </span>
                    <span th:if="${pageNum1 <= count1}">
                        <a class="next" th:href="@{/index/toCityDeatil(cityname=${city.getCityname()},pageNum1=${pageNum1}+1)}">
                            <button type="button" class="layui-btn">下一页</button>
                        </a>
                    </span>
                </div>
            </div>

            <!--酒店推荐的-->
            <div class="layui-tab-item">
                <span th:if="${!hotels.isEmpty()}">
                    <div th:each="hotels:${hotels}" style="width: 290px;float: left;height: auto">
                        <div style="background-color: #d8dcea;height: 240px;width: 270px;float: left;margin: 30px 30px;border-radius: 5%">
                            <img th:src="${hotels.getPicture()}" width="250px" height="167.19px" alt="" style="border-radius: 10%;margin: 10px 10px">
                            <p style="text-align: center;font-size: 20px;color: black;margin-right: auto;margin-left: auto" th:text="${hotels.getHotelname()}"></p>
                        </div>
                    </div>
                    <div class="pageturn" style="margin-left: 80%;position: fixed;bottom: 10px">
                        <span th:if="${pageNum2 > 1}">
                            <a class="prev" th:href="@{/index/toCityDeatil(cityname=${city.getCityname()},pageNum2=${pageNum2}-1)}">
                                <button type="button" class="layui-btn">上一页</button>
                            </a>
                        </span>
                        <span th:if="${pageNum2<=count2}">
                            <a class="next" th:href="@{/index/toCityDeatil(cityname=${city.getCityname()},pageNum2=${pageNum2}+1)}">
                                <button type="button" class="layui-btn">下一页</button>
                            </a>
                        </span>
                    </div>
                </span>
                <span th:if="${hotels.isEmpty()}">
                    <h3 style="font-size: 16px;margin-top: 50px">暂无推荐，如有推荐请联系我哦~ 2329826787@qq.com</h3>
                </span>
            </div>
            <!--购物点推荐-->
            <div class="layui-tab-item">
                <span th:if="${!shopPlaces.isEmpty()}">
                    <div th:each="shopPlaces:${shopPlaces}" style="width: 290px;float: left;height: auto">
                        <div style="background-color: #d8dcea;height: 240px;width: 270px;float: left;margin: 30px 30px;border-radius: 5%">
                            <img th:src="${shopPlaces.getPicture()}" width="250px" height="167.19px" alt="" style="border-radius: 10%;margin: 10px 10px">
                            <p style="text-align: center;font-size: 20px;color: black;margin-right: auto;margin-left: auto" th:text="${shopPlaces.getShopplacename()}"></p>
                        </div>
                    </div>
                    <div class="pageturn" style="margin-left: 80%;position: fixed;bottom: 10px">
                        <span th:if="${pageNum3 > 1}">
                            <a class="prev" th:href="@{/index/toCityDeatil(cityname=${city.getCityname()},pageNum3=${pageNum3}-1)}">
                                <button type="button" class="layui-btn">上一页</button>
                            </a>
                        </span>
                        <span th:if="${pageNum3<=count3}">
                            <a class="next" th:href="@{/index/toCityDeatil(cityname=${city.getCityname()},pageNum3=${pageNum3}+1)}">
                                <button type="button" class="layui-btn">下一页</button>
                            </a>
                        </span>
                    </div>
                </span>
                <span th:if="${shopPlaces.isEmpty()}">
                    <h3 style="font-size: 16px;margin-top: 50px">暂无推荐，如有推荐请联系我哦~ 2329826787@qq.com</h3>
                </span>
            </div>
        </div>
    </div>
</div>
<!--引入底部-->
<div id="foot" th:include="common/footer"></div>
</body>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</html>